<template>
	<view class="auto-page">
		<view class="user-header f-row bg-white">
			<view class="avator"><text>头像</text></view>
			<view class="name"><text>名称</text></view>
			<view class="first-visit"><text>首次访问时间</text></view>
			<view class="lately-pay"><text>最近下单时间</text></view>
			<view class="pay-num"><text>下单次数</text></view>
		</view>
		<scroll-view style="flex: 1;background-color: #FFFFFF;" scroll-x="false" scroll-y="true" v-if="dataList.length > 0">
			<view class="user-item f-row" v-for="(item, index) in dataList" :key="index">
				<!-- 头像 -->
				<view class="user-pic">
					<image mode="aspectFill" :src="item.avatar"></image>
				</view>
				<!-- 用户名 -->
				<view class="user-name">
					<text>{{item.nickname}}</text>
				</view>
				<!-- 首次访问时间 -->
				<view class="user-first-visit">
					<text>{{item.nickname}}</text>
				</view>
				<!-- 最近消费时间 -->
				<view class="user-lately-pay">
					<text>{{item.last_pay_time}}</text>
				</view>
				<!-- 下单次数 -->
				<view class="user-pay-num">
					<text>{{item.pay_num}}</text>
				</view>
			</view>
			<loadingmore :statusObject="statusObject" @reload="reload"></loadingmore>
		</scroll-view>
	</view>
</template>

<script>
	let _this;
	import loadingmore from '../../components/loading-more.vue';
	import OTHER from '../../lib/utils.js'
	export default {
		components: { loadingmore },
		data() {
			return {
				dataList: [],
				page: 1,
				limit: 10,
				statusObject: {status : 0},
				requesting: false
			}
		},
		onLoad() {
			_this = this;
			_this.requestData();
		},
		methods: {
			reload() {
				_this.dataList = [];
				_this.page = 1;
				_this.requestData();
			},
			requestData() {
				if((_this.statusObject.status !== 0 && _this.statusObject.status !== 3) || _this.requesting) return;
				_this.requesting = true;
				OTHER.userLst({
					page: _this.page,
					limit: _this.limit
				}).then((res) => {
					console.log(res);
					_this.dataList = _this.dataList.concat(res.list);
					if(res.count == 0) {
						_this.statusObject = {
							status: 1
						}
					}
					else if (_this.dataList.length == res.count) {
						_this.statusObject = {
							status: 2
						}
						_this.page += 1;
					} else {
						_this.statusObject = {
							status: 3
						}
						_this.page += 1;
					}
					_this.requesting = false;
				}).catch((err) => {
					console.log(err);
					_this.requesting = false;
				});
			}
		}
	}
</script>

<style>
	.user-item{
		width: 100vw;
		border-bottom: 2rpx solid #e8e8e8;
	}
	.user-item , .user-pic , .user-name, .user-first-visit, .user-lately-pay , .user-pay-num, .user-pic image{
		height: 100rpx;
	}
	.user-pic , .user-pic image{
		width: 100rpx;
	}
	.user-name , .user-first-visit , .user-lately-pay{
		padding: 0 10rpx;
		font-size: 20rpx;
		justify-content: center;
		align-items: center;
		display: flex;
	}
	.user-name , .user-first-visit , .user-lately-pay{
		flex: 1;
	}
	.user-pay-num , .pay-num{
		width: 100rpx;
		font-size: 20rpx;
		justify-content: center;
		align-items: center;
		display: flex;
	}
	.user-header{
		box-sizing: border-box;
		border-bottom: 2rpx solid #e8e8e8;
		border-top: 2rpx solid #e8e8e8;
		height: 80rpx;
	}
	 .avator , .name , .first-visit , .lately-pay , .pay-num{
		height: 76rpx;
		line-height: 76rpx;
		text-align: center;
		font-size: 22rpx;
	}
	.avator {
		width: 100rpx;
	}
	.name , .first-visit , .lately-pay{
		flex: 1;
	}
	.name , .user-name{
		overflow: hidden;
	}
</style>
